<template>
	<view class="broswer">
		<StatusBar></StatusBar>
	<!-- 	<view class="header">
			<view class="search" @tap="broswerSearch">
				<uni-search-bar placeholder="请输入访问链接" bgColor="#F5F6F8" readonly="" cancelButton="none">
					<template v-slot:searchIcon>
						<image src="../../static/images/home/search.png" class="icon" mode=""></image>
					</template>
				</uni-search-bar>
			</view>
		</view> -->
		<view class="header">
			<view class="left">
			</view>
			<view class="title">
				发现
			</view>
			<!-- <view class="right">
				<view class="moon">
					<text class="iconfont icon-moon"></text>
				</view>
				<view class="message">
					 <view class="icon-container">
					    <text class="iconfont icon-xiaoxi"></text> 
					    <view class="badge"></view> 
					  </view>
				</view>
			</view> -->
		</view>
		<view class="contentBox">
			<view class="uni-margin-wrap">
				<swiper class="swiper" indicator-color="#D8D8D8" indicator-active-color="#2F83F5" :indicator-dots="true"
					:autoplay="false" :interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in swiper">
						<view class="swiper-item">
							<view class="img_box" @click="toweb(item.url,item.chain)">
								<image :src="item.img" mode="widthFix" class="img"></image>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="tilp" @tap="protocol">
				<view class="left">
					<image src="/static/images/brower/img.png" class="icon" mode=""></image>
				</view>
				<view class="right">
					<view class="text">
						Dapp使用协议
					</view>
					<view class="r_icon">
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="listTitle">
					<view class="title">
						热门DAPP
					</view>
				</view>
				<view class="listgrid" v-if="dapps&&dapps.length>0">
					<view class="item" v-for="(item,index) in dapps"
						 @click="toweb(item.url,item.chain)">
						<view class="logo">
							<image :src="item.img" mode="widthFix" class="icon"></image>
						</view>
						<view class="name text-ellipsis">
							{{item.name}}
						</view>
					</view>
				</view>
				<view v-else>
					<zanwei style="margin-top:80upx" type="2"></zanwei>
				</view>

			</view>
		</view>
		
		<tabbar :selectedIndex="Appstatus==0?2:1"></tabbar>
	</view>
</template>

<script>
	import {
		getSlide,
		getdapps
	} from "../../http/api.js"
	import common from '@/js_sdk/common/common.js'
	export default {
		data() {
			return {
				...common.config,
				swiper: [],
				dapps: [],

			}
		},
		onShow() {
			uni.hideTabBar()
		},
	
		mounted() {
			uni.showLoading({
				title: '加载中',
				mask: true,
			});
			let params = {
				type: 1
			}
			getSlide(params).then((res) => {
				uni.hideLoading()
				this.swiper = res.data
			}).catch((err) => {
				uni.hideLoading()
			})
			let params2 = {
				chainid: "1"
			}
			getdapps(params2).then((res) => {
				this.dapps = res.data
				uni.hideLoading()
			}).catch((err) => {
				uni.hideLoading()
			})
		},
		computed: {
			chainInfo() {
				return this.$store.getters.chainInfo
			},
			Appstatus() {
				console.log(123)
				return this.$store.getters.Appstatus
			}
		},
		methods: {
			...common.methonds,
			protocol() {
				uni.navigateTo({
					url: `/pages/protocol/protocol?id=2&title=Dapp使用协议`
				})
			},
			broswerSearch() {
				uni.navigateTo({
					url: `/pages/broswerSearch/broswerSearch`
				})
			},
			totronweb() {
				uni.navigateTo({
					url: `/pages/tronweb/tronweb`
				})
			},
			toweb(url, chain) {
				// 获取支持链的数量
				let chainlength=chain.length
				// 循环和支持的每个链信息作对比，满足条件则跳转并停止执行
				for(let i=0;i<chainlength;i++){
					if(this.chainInfo.chainType==chain[i].chainType&&this.chainInfo.chainId==chain[i].chainId){
						if (this.chainInfo.chainType == "ETH") {
							uni.navigateTo({
								url: `/pages/ethweb/ethweb?url=${url}`
							})
							return
						} else if (this.chainInfo.chainType == "TRON") {
							uni.navigateTo({
								url: `/pages/tronweb/tronweb?url=${url}`
							})
							return
						}
					}
				}
				// 能走到这里说明不满足支持的链，所以我们要拼接一下
				let chainnames=""
				for(let i=0;i<chainlength;i++){
					if(i==chainlength-1){
						chainnames+=chain[i].chainName
					}else{
						chainnames+=chain[i].chainName+','
					}
					
				}
				this.error(`请切换到${chainnames}链打开`)
				// return
				
				// if (chainType == this.chainInfo.chainType && chainId == this.chainInfo.chainId) {
				// 	if (chainType == "ETH") {
				// 		uni.navigateTo({
				// 			url: `/pages/ethweb/ethweb?url=${url}`
				// 		})
				// 	} else if (chainType == "TRON") {
				// 		uni.navigateTo({
				// 			url: `/pages/tronweb/tronweb?url=${url}`
				// 		})
				// 	}
				// } else {
					
				// }

			}
		}
	}
</script>

<style scoped lang="scss">
	@import "/static/iconfont/iconfont.css";

	.broswer {
		font-weight: 400;
		padding: 0 38upx;
		height: 100%;

		// .header {
		// 	display: flex;
		// 	align-items: center;

		// 	.search {
		// 		flex: 1;

		// 		.icon {
		// 			width: 26upx;
		// 			height: 26upx;
		// 		}

		// 		.uni-searchbar {
		// 			padding: 20upx 0;
		// 		}

		// 		.uni-searchbar__box {
		// 			height: 66upx;
		// 		}
		// 	}

		// 	.san {
		// 		display: flex;
		// 		margin-left: 26upx;

		// 		.icon {
		// 			width: 54upx;
		// 			height: 54upx;
		// 		}
		// 	}
		// }
		.header {
			width: 100%;
			height: 100upx;
			box-sizing: border-box;
			padding: 0 38upx 0 54upx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			background: #FFFFFF;
		
			.left {}
		
			.title {}
		
			.right {
				position: absolute;
				display: flex;
				align-items: center;
				height: 100%;
				top: 0;
				right: 34upx;
				color: #3D3D3D;
				font-weight: bold;
		
				.moon {
					margin-right: 34upx;
				}
		
				.message {
					.icon-container {
						position: relative;
		
						.badge {
							position: absolute;
							bottom: 6upx;
							right: 0;
							background-color: #FE4606;
							width: 12upx;
							height: 12upx;
							border-radius: 6upx;
		
						}
					}
		
				}
			}
		}
		

		.contentBox {
			.uni-margin-wrap {
				width: 100%;

				.swiper {
					width: 100%;
					height: 365upx;

					.swiper-item {
						display: block;
						text-align: center;

						.img_box {
							display: flex;
							justify-content: center;
							border-radius: 20upx;
							overflow: hidden;

							.img {
								width: 100%;
							}
						}
					}
				}
			}

			.list {
				margin-top: 54upx;

				.listTitle {
					display: flex;
					justify-content: space-between;
					font-size: 32upx;
					color: #3D3D3D;
					align-items: center;

					.edit {
						color: #B2B2B2;
						font-size: 28upx;
					}
				}

				.listgrid {
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					gap: 20upx;
					margin-top: 36upx;

					.item {
						width: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;

						.logo {
							display: flex;

							.icon {
								width: 100upx;
								height: 100upx;
							}
						}

						.name {
							width: 100upx;
							font-size: 20upx;
							color: #3D3D3D;
							margin-top: 20upx;
						}

						.text-ellipsis {
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							text-align: center;
						}
					}
				}
			}
		}

		.tilp {
			margin-top: 54upx;
			height: 102upx;
			background: #F5F6F8;
			display: flex;
			border-radius: 20upx;
			align-items: center;
			padding: 0 20upx 0 28px;

			.left {
				display: flex;
				margin-right: 30upx;

				.icon {
					width: 82upx;
					height: 72upx;
				}
			}

			.right {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.text {
					font-size: 28upx;
					color: #3D3D3D;
				}

				.r_icon {
					color: #999999;

					.icon {
						width: 20upx;
						height: 20upx;
					}
				}
			}
		}
	}
</style>